<template>
  <Layout>
    <view class="category-page">
      <view class="header">
        <text class="page-title">分类页面</text>
      </view>

      <view class="category-list">
        <view
          class="category-item"
          v-for="(category, index) in categories"
          :key="index"
          @click="selectCategory(category)"
        >
          <view class="category-icon">
            <text class="icon-text">{{ category.icon }}</text>
          </view>
          <text class="category-name">{{ category.name }}</text>
        </view>
      </view>
    </view>
  </Layout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Layout from '@/components/Layout.vue'

interface Category {
  id: number
  name: string
  icon: string
}

const categories = ref<Category[]>([
  { id: 1, name: '数码产品', icon: '📱' },
  { id: 2, name: '服装配饰', icon: '👕' },
  { id: 3, name: '家居用品', icon: '🏠' },
  { id: 4, name: '运动户外', icon: '⚽' },
  { id: 5, name: '美妆护肤', icon: '💄' },
  { id: 6, name: '食品饮料', icon: '🍎' },
])

const selectCategory = (category: Category) => {
  uni.showToast({
    title: `选择了${category.name}`,
    icon: 'none',
  })
}
</script>

<style scoped>
.category-page {
  padding: 40rpx;
}

.header {
  text-align: center;
  margin-bottom: 60rpx;
}

.page-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
}

.category-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40rpx;
}

.category-item {
  background: #ffffff;
  padding: 60rpx 40rpx;
  border-radius: 20rpx;
  text-align: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.category-item:active {
  transform: scale(0.95);
}

.category-icon {
  margin-bottom: 20rpx;
}

.icon-text {
  font-size: 80rpx;
}

.category-name {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}
</style>
